<template>
  <div class="comprehensive-information-page">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <main>
      <div class="container">
        <div class="item">
          <div class="img-container">
            <upload-picture-card
              :projectId="projectId"
              :publishId="publishId"
              :getFileFn="getTableData">
            </upload-picture-card>
          </div>
          <div class="project-content">
            <h3>{{ projectInfo.projectAbbreviation || projectInfo.projectName }}
              <i v-if="hasTabEdit" class="el-icon-edit-outline" @click="editProject"></i>
            </h3>
            <ul class="project-info">
              <li>
                <span class="label">工程类别：</span>
                <span class="text" :title="projectInfo.projectType">{{ projectInfo.projectType }}</span>
              </li>
              <li>
                <span class="label">工程用途：</span>
                <span class="text" :title="projectInfo.projectPurpose">{{ projectInfo.projectPurpose }}</span>
              </li>
              <li>
                <span class="label">工程造价：</span>
                <span class="text">
                  {{ projectInfo.projectCost ? `${projectInfo.projectCost} 万元` : '暂无' }}
                </span>
              </li>
              <li>
                <span class="label">建筑面积：</span>
                <span class="text">{{ projectInfo.area ? `${projectInfo.area} 平方米` : '暂无' }} </span>
              </li>
              <li>
                <span class="label">项目状态：</span>
                <span class="text">
                  {{ projectStatusObj[projectInfo.projectStatus] || ''}}
                </span>
              </li>
              <li>
                <span class="label">项目地址：</span>
                <span class="text" :title="projectInfo.projectAddress">{{ projectInfo.projectAddress }}</span>
              </li>
              <li>
                <span class="label">结构类型：</span>
                <span class="text" :title="projectInfo.buildingStructure">{{ projectInfo.buildingStructure }}</span>
              </li>
              <li>
                <span class="label">合同工期：</span>
                <span class="text">
                  {{ projectInfo.contractFrom ? $moment(projectInfo.contractFrom).format('yyyy-MM-DD') : '' }}
                  {{ projectInfo.contractTo ? ' 至 ' + $moment(projectInfo.contractTo).format('yyyy-MM-DD') : '' }}
                </span>
              </li>
              <li>
                <span class="label">开工日期：</span>
                <span class="text">
                  {{ projectInfo.commencementDate
                    ? $moment(projectInfo.commencementDate).format('yyyy-MM-DD')
                    : '' }}
                </span>
              </li>
              <li>
                <span class="label">竣工日期：</span>
                <span class="text">
                  {{ projectInfo.completionDate
                    ? $moment(projectInfo.completionDate).format('yyyy-MM-DD')
                    : '' }}
                </span>
              </li>
              <li>
                <span class="label">所属机构：</span>
                <span class="text" :title="projectInfo.orgName">{{ projectInfo.orgName }}</span>
              </li>
<!--              <li>-->
<!--                <span class="label">中标单位：</span>-->
<!--                <span class="text" :title="projectInfo.bidding_winner">{{ projectInfo.bidding_winner }}</span>-->
<!--              </li>-->
<!--              <li>-->
<!--                <span class="label">设计单位：</span>-->
<!--                <span class="text" :title="projectInfo.designer">{{ projectInfo.designer }}</span>-->
<!--              </li>-->
<!--              <li>-->
<!--                <span class="label">建设单位：</span>-->
<!--                <span class="text" :title="projectInfo.constructorUnit">{{ projectInfo.constructorUnit }}</span>-->
<!--              </li>-->
<!--              <li>-->
<!--                <span class="label">监理单位：</span>-->
<!--                <span class="text" :title="projectInfo.supervisor">{{ projectInfo.supervisor }}</span>-->
<!--              </li>-->
<!--              <li>-->
<!--                <span class="label">施工单位：</span>-->
<!--                <span class="text" :title="projectInfo.builder">{{ projectInfo.builder }}</span>-->
<!--              </li>-->
<!--              <li>-->
<!--                <span class="label">勘察单位：</span>-->
<!--                <span class="text" :title="projectInfo.surveyor">{{ projectInfo.surveyor }}</span>-->
<!--              </li>-->
              <li>
                <span class="label">工地概况：</span>
                <span class="text" :title="projectInfo.projectDescription">{{ projectInfo.projectDescription }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="item">

        </div>
      </div>
      <div class="message-container">
        <div class="item">
          <div class="header">
            <span class="title">项目新闻</span>
            <i v-if="hasTabSet" class="el-icon-menu" @click="handleClick('1')"></i>
          </div>
          <div class="item-content">
            <el-table
              class="table-container"
              :data="newsList"
              v-loading="newsTableLoading"
              element-loading-custom-class="custom-load"
              row-key="uuid">
              <el-table-column label="更新时间" prop="modifyTime"></el-table-column>
              <el-table-column label="标题" prop="projectTitel"></el-table-column>
              <el-table-column label="发布人" prop="publishName"></el-table-column>
              <div class="empty-content" slot="empty">
                <i class="iconfont iconwushuju"></i>
                <p>暂无数据</p>
              </div>
            </el-table>
          </div>
        </div>
        <div class="item">
          <div class="header">
            <span class="title">项目公告</span>
            <i v-if="hasTabSet" class="el-icon-menu" @click="handleClick('2')"></i>
          </div>
          <div class="item-content">
            <el-table
              class="table-container"
              :data="noticeList"
              v-loading="noticeTableLoading"
              element-loading-custom-class="custom-load"
              row-key="uuid">
              <el-table-column label="更新时间" prop="modifyTime"></el-table-column>
              <el-table-column label="标题" prop="projectTitel"></el-table-column>
              <el-table-column label="发布人" prop="publishName"></el-table-column>
              <div class="empty-content" slot="empty">
                <i class="iconfont iconwushuju"></i>
                <p>暂无数据</p>
              </div>
            </el-table>
          </div>
        </div>
        <div class="item">
          <div class="header">
            <span class="title">体系管理</span>
            <i v-if="hasTabSet" class="el-icon-menu" @click="getQualitySystemList"></i>
          </div>
          <div class="item-content">
            <el-table
              class="table-container"
              :data="systemList"
              v-loading="systemTableLoading"
              element-loading-custom-class="custom-load"
              row-key="uuid">
              <el-table-column label="更新时间" prop="modifyTime"></el-table-column>
              <el-table-column label="标题" prop="dataName"></el-table-column>
              <el-table-column label="类型">
                <template slot-scope="scope">
                  {{ scope.row.projectType === '1' ? '质量' : '' }}
                  {{ scope.row.projectType === '2' ? '安全' : '' }}
                </template>
              </el-table-column>
              <div class="empty-content" slot="empty">
                <i class="iconfont iconwushuju"></i>
                <p>暂无数据</p>
              </div>
            </el-table>
            <el-pagination
              v-if="systemTotal > 10"
              :page-size="systemPageSize"
              :current-page="systemPageNo"
              layout="total, sizes, prev, pager, next, jumper"
              :total="systemTotal"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
      <set-project
        type="edit"
        :options="formData"
        :visible="projectVisible"
        :loading="loading"
        @cancel="projectVisible = false"
        @submit="handleSubmit">
      </set-project>
      <upload-news
        :visible="visible"
        :projectType="projectType"
        @change="handleChange"
        @cancel="visible = false">
      </upload-news>
    </main>
  </div>
</template>

<script>
import Breadcrumb from '@/components/public/Breadcrumb';
import uploadNews from '@/components/project/comprehensive/uploadNews';
import uploadPictureCard from '@/components/project/comprehensive/uploadPictureCard';
import setProject from '@/components/corp/setProject';

export default {
  components: {
    Breadcrumb,
    uploadNews,
    setProject,
    uploadPictureCard
  },
  data() {
    return {
      // 面包屑数据
      breadcrumbData: [
        {
          name: '综合管理',
        },
        {
          name: '项目信息'
        }
      ],
      projectInfo: {},
      visible: false,
      projectType: '',
      // 项目新闻
      newsList: [],
      newsTotal: 0,
      newsPageNo: 1,
      newsPageSize: 10,
      newsTableLoading: false,
      // 项目公告
      noticeList: [],
      noticeTableLoading: false,
      // 体系列表数据
      systemList: [],
      systemTotal: 0,
      systemPageNo: 1,
      systemPageSize: 10,
      systemTableLoading: false,
      projectVisible: false,
      formData: {},
      loading: false,
      projectStatusObj: {
        '0': '停工',
        '1': '在建工程',
        '2': '竣工',
      }
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
    publishId() {
      return this.$store.state.userInfo.uuid;
    },
  },
  created() {
    this.getByProjectId();
    this.getTableData('1');
    this.getTableData('2');
    this.getQualitySystemList();
  },
  methods: {
    /**
     * 获取项目信息
     */
    async getByProjectId() {
      const params = {
        projectId: this.projectId,
      };
      const { success, data: {
        data
      }} = await this.$Model.getByProjectId(params);
      if (success && data) {
        this.projectInfo = data || {};
        this.$store.dispatch('getProjectListByUser');
      }
    },
    /**
     * @param {String} type 类型
     */
    handleClick(type) {
      this.projectType = type;
      this.visible = true;
    },
    /**
     * 获取体系管理列表数据
     */
    async getQualitySystemList() {
      this.systemTableLoading = true;
      const params = {
        pageNum: 1,
        pageSize: 10,
        projectId: this.projectId
      };
      const { success, data: { data }} = await this.$Model.getQualitySystemList(params);
      this.systemTableLoading = false;
      if (success && Array.isArray(data.list)) {
        this.systemList = data.list;
      }
    },
    handleChange() {
      this.getTableData();
    },
    // 编辑项目
    editProject() {
      this.formData = { ...this.projectInfo };
      this.projectVisible = true;
    },
    // 保存编辑
    async handleSubmit(data) {
      if (!data) return;
      this.loading = true;
      const { success } = await this.$Model.projectSet(data);
      this.loading = false;
      if (success) {
        this.getByProjectId();
        this.$message.success('保存成功');
        this.projectVisible = false;
      }
    },
    // 获取项目新闻、公告列表数据
    async getTableData(type) {
      const projectType = type || this.projectType;
      projectType === '1'
        ? this.newsTableLoading = true
        : this.noticeTableLoading = true;
      const result = await this.$Model.getCommonList({
        pageNum: 1,
        pageSize: 10,
        projectType,
        projectId: this.projectId,
      });
      this.newsTableLoading = false;
      this.noticeTableLoading = false;
      const { success, data: { data }} = result;
      if (success && data) {
        const list = data.list || [];
        if (projectType === '1') {
          this.newsList = list;
          return;
        }
        this.noticeList = list;
      }
      return result;
    }
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/table";

  .comprehensive-information-page {
    > main {
      width: 100%;
      height:calc(100% - 40px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-color: $baseBg;
      padding: 20px;
      .container {
        width: 100%;
        height: 60%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item {
          width: 49.7%;
          height: 100%;
          background: $mainBg;
          border-radius: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          .img-container {
            width: 600px;
            height: 100%;
            overflow: auto;
          }
          .project-content {
            width: calc(100% - 600px);
            height: 100%;
            padding: 20px 0 5px;
            position: relative;
            h3 {
              width: 100%;
              height: 60px;
              display: flex;
              justify-content: center;
              align-items: center;
              text-align: center;
              font-size: 20px;
              .el-icon-edit-outline {
                margin-left: 5px;
                cursor: pointer;
                &:hover {
                  color: $mainColor;
                }
              }
            }
            .project-info {
              width: 100%;
              height: calc(100% - 60px);
              padding: 10px 5px;
              overflow: auto;
              li {
                width: 100%;
                height: 40px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                border-top: 1px solid rgba(241, 241, 241, .3);
                padding: 0 10px;
                &:nth-last-child(1) {
                  border-bottom: 1px solid rgba(241, 241, 241, .3);
                }
                .label {
                  width: 100px;
                  color: $mainColor;
                }
                .text {
                  flex: 1;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }
            }
          }
        }
      }
      .message-container {
        width: 100%;
        height: 39%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item {
          width: 33%;
          height: 100%;
          background: $mainBg;
          .header {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 20px 0;
            color: $mainColor;
            .title {
              font-size: 20px;
            }
            .el-icon-menu {
              font-size: 28px;
              cursor: pointer;
            }
          }
          .item-content {
            width: 100%;
            height: calc(100% - 40px);
            padding: 20px;
            .table-container {
              height: 100%;
              /deep/ .el-table__body-wrapper {
                height: calc(100% - 40px);
                padding-bottom: 46px;
                overflow-y: auto;
              }
            }
          }
        }
      }
    }
  }
</style>
